<template>
  <div
    class="theme-thumbnail__wrapper relative"
    :class="{ active: active === theme.id }"
  >
    <el-icon v-if="active === theme.id" class="w-5 absolute top-7 left-7">
      <check class="check" />
    </el-icon>
    <div class="theme-thumbnail">
      <div class="theme-thumbnail__header"></div>
      <div class="theme-thumbnail__main">
        <div class="theme-thumbnail__aside"></div>
        <div class="theme-thumbnail__content"></div>
      </div>
    </div>
    <div class="theme-thumbnail__text">
      {{ theme.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { Check } from '@element-plus/icons-vue'

import type { AppThemeItem } from './types'

interface IProps {
  theme: AppThemeItem
  active: string | number
}

// const emit = defineEmits<{
//   (event: 'remove'): void
// }>()

withDefaults(defineProps<IProps>(), {})
// const handleRemove = () => {
//   emit('remove')
// }
</script>

<style lang="scss" scoped>
.theme-thumbnail__wrapper {
  @apply flex flex-col items-center justify-center gap-y-3 text-sm cursor-pointer max-w-full relative;

  .check {
    @apply text-xl font-medium;
    color: var(--el-color--primary);
  }
  .theme-thumbnail__remove {
    @apply absolute top-0 -right-0.5;
  }

  .theme-thumbnail {
    @apply w-16 h-16 flex flex-col rounded overflow-hidden;
    background-color: #ffffff;
    box-shadow: 1px 1px 8px 0px rgba(29, 32, 48, 0.2);

    .theme-thumbnail__header {
      @apply h-4;
      background-color: v-bind('theme.config.header.background');
    }

    .theme-thumbnail__main {
      @apply flex-1;

      .theme-thumbnail__aside {
        @apply w-5 h-full;
        background-color: v-bind('theme.config.aside.background');
      }

      .theme-thumbnail__content {
        @apply h-full flex-1;
      }
    }
  }

  .theme-thumbnail__text {
    color: #262626;
    @apply px-4 box-border block w-full;
  }

  &.active .theme-thumbnail__text {
    color: var(--el-color--primary);
  }
}
</style>
